<template>

  <div class="productAndPrice-detail-view">
    <el-form :inline="true" label-position="right" label-width="130px">
      <el-row v-if="type == 'agent'">
        <el-col :span="12">
          <el-form-item label="代理商名称:">
            {{ datas.agentName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码:">
            {{ datas.creditCode }}
          </el-form-item>
        </el-col>
      </el-row>

      <!--      <el-row v-if="type == 'agent'">-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="代理商级别:">-->
      <!--            {{ getLabel('agent_level',datas.agentLevel) }}-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->

      <!--      </el-row>-->

      <el-row v-else>
        <el-col :span="12">
          <el-form-item label="兼职名称:">
            {{ datas.userName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="兼职级别:">
            {{ getLabel('agent_level', datas.agentLevel) }}
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品通用名:">
            {{ agentProduct.productPopularName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商品名:">
            {{ agentProduct.productName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="包装规格:">
            {{ agentProduct.packSpecs }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="type == 'agent' ? '代理属性:' : '兼职属性:'">
            {{ getLabel(type == 'agent' ? 'agent' : 'agent_person', agentProduct.agentAttribute) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理地区:">
            <area-list-view :areas="agentProduct.region"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="可营销终端:">
            {{ getLabel('app_mode', agentProduct.terminalType) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交易价:">
            <div style="display: flex;align-items: center">
              <span>{{ agentProduct.tradePrice }}元/{{ getLabel('sell_unit', agentProduct.sellUnit) }}</span>

              <span
                  v-if="(agentProduct.processDefinitionKey == 'agentProductChangePrice' || agentProduct.processDefinitionKey == 'agentPersonProductChangePrice') && agentProduct.flowStatus == 'DOING'"
                  class="doing-status">变更中</span>
              <el-icon v-else-if="agentProduct.agentProductStatus == 1 && !disabled" :size="20" color="#409EFC"
                       style="padding-left: 10px" @click="onEdit">
                <edit/>
              </el-icon>
            </div>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="type == 'agent' ? '代理期限至:' : '兼职期限至:'">
            {{ dateFormat('yyyy-mm-dd', agentProduct.agentEndTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="最低销量:">
            <div v-if="agentProduct.minSale">
              {{ agentProduct.minSale }}{{
                getLabel('sell_unit', agentProduct.sellUnit)
              }}/{{ getLabel('sell_num_unit', agentProduct.minSaleUnit) }}
            </div>
            <div v-else>未设置</div>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="销量保证金:">

            <div v-if="agentProduct.minSalePromise">
              {{ agentProduct.minSalePromise }}元
            </div>
            <div v-else>未设置</div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责营销职员:">
            {{ agentProduct.headName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理服务摘要名称:">
            {{ agentProduct.abstract }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="创建人:">
            {{ agentProduct.creatorName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="创建时间:">
            {{ dateFormat('yyyy-mm-dd HH:MM', agentProduct.createdAt) }}
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>

        <el-col :span="24">
          <el-form-item label="其他约定:">
            {{ agentProduct.remark }}
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
  </div>

  <detail-drawer ref="detailDrawer" :size-width="1000" custom-title>
    <template #title>

      <span>合同 </span>
      <span class="drawerTitle">{{ agentProduct.contractName }}</span>

    </template>
    <template #contents>

      <contract-detail
          ref="salesDetailDrawer"
          :contract-id="agentProduct.contractId"
      />

    </template>
  </detail-drawer>

</template>

<script>
import contractDetail from '@CRM/views/commonView/contract/contractDetail.vue'
import {Edit} from '@element-plus/icons'
import {defineComponent, inject, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'ProductAndPriceDetailView',
  components: {Edit, contractDetail},
  props: {
    datas: {
      type: Object,
      default: {}
    },
    agentProduct: {
      type: Object,
      default: {}
    },
    type: {
      type: String,
      default: 'agent'
    },
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  setup(props, {emit}) {
    const api = inject('api')
    var data = reactive({
      detailDrawer: null,
    })

    const onEdit = () => {
      emit('editPrice')
    }

    const contractClick = () => {
      data.detailDrawer.open()
      // emit('contract')
    }

    return {
      ...toRefs(data),

      onEdit,
      contractClick
    }
  }
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";

.productAndPrice-detail-view {
  .doing-status {
    color: $assist-color;
    margin-left: $block-img-img-x;
  }

  .mainColor {
    color: $active-color
  }
}
</style>
